<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue之路由自定义完成路由实现学习</title>
    <!-- 导入vue库依赖 -->
    <script src="./js/vue.js"></script>
    <script src="./js/vue-router.js"></script>
</head>

<body>
    <div id="app">
        <a href="#/keji">科技</a>
        <a href="#/caijin">财经</a>
        <a href="#/sannong">三农</a>
        <a href="#/lanqiu">篮球</a>

        <!-- 组件占位符-->
        <component :is='router'></component>

    </div>
    <script>
        var keji = {
            template: `<h3>科技页面</h3>`
        }
        var caijin = {
            template: `<h3>财经页面</h3>`
        }

        var sannong = {
            template: `<h3>三农页面</h3>`
        }

        var lanqiu = {
            template: `<h3>篮球页面</h3>`
        }

        var vm = new Vue({
            el: '#app',
            data: {
                msg: '',
                router: ''
            },
            methods: {},
            components: {
                'keji': keji,
                'caijin': caijin,
                'sannong': sannong,
                'lanqiu': lanqiu
            }
        })

        window.onhashchange = function () {
            console.log(location.hash.slice(1));

            switch (location.hash.slice(1)) {
                // console.log();
                case '/keji':
                    vm.router = 'keji'
                    break

                case '/caijin':
                    vm.router = 'caijin'
                    break

                case '/sannong':
                    vm.router = 'sannong'
                    break

                case '/lanqiu':
                    vm.router = 'lanqiu'
                    break
            }
        }
    </script>
</body>

</html>


<!-- 路由分为前端路由和后端路由 
1.后端路由是根据不同的网络地址请求不同的页面实现的路由 频繁请求有性能问题
2.前端路由是根据监听用户事件而达到展示不同页面的效果的方式 单页面实现技术-->
<!-- 前端路由实现原理 ： （single page application）单页面应用程序 -->